// 项目的入口文件

import React from 'react';
import ReactDOM from 'react-dom/client';
// 全局的样式文件
import './index.css';
// 引入根组件
import App from './App';
// google性能优化库文件, 国内无法使用, 因为服务器在国外, 所以没有太大的作用
// import reportWebVitals from './reportWebVitals';


// redux全局话
// 第一步:  导入store仓库
// import store from './store3-module/index'
import store from './store-rtk-mokuaihua';
// 第二步:  导入 react-redux 提供的一个Proovider组件
// react-redux 是redux 官方团队提供的一个插件, 为了实现redux 的全局化使用的, 
// 注意: 必须配个redux 一起使用, 
import { Provider } from 'react-redux'

// 导入路由组件
import { HashRouter, BrowserRouter as Router } from 'react-router-dom'
// HashRouter 表示使用hash 路由模式
// BrowserRouter使用 h5历史记录模式

// 导入vant 组件库的css 样式文件
import 'react-vant/es/styles';



// 创建一个根实例
const root = ReactDOM.createRoot(document.getElementById('root'));
// 不建议使用严格模式, 因为严格模式可以提示一个错误或警告, 警告的类型是一些 react 中已经废弃或不再更新维护的语法
// 因为项目中可能使用一些第三方的包或插件, 可能包含就得已经废弃的语法, 这时候会一直有警告或提示, 所以不用严格模式




root.render(
  // <React.StrictMode>
  <Provider store={store}>
    {/* 使用Router组件包裹 根组件,这样可以实现全局路由 */}
    <Router>
      <App />
    </Router>
  </Provider>
  // </React.StrictMode >
);


// 面试题? root.render 执行干了什么?
// 第一步: 首先判断是函数组件还是类组件, 如果是函数组件直接调用函数方法, 返回jsx 虚拟dom, 进而转成真实dom.,渲染页面
// 如果是类组件, new 类组件, 然后调用该实例上的render 方法, 生成虚拟dom, 转成真实dom,渲染页面


// 回顾二阶段call apply bind 三种改变this的方式
// let baoqiang = {
//   name: '宝强',
//   age: 40,
//   say(a, b) {
//     console.log(`${this.name}说孩子是我的--${a}--${b}`);
//   }
// }

// let songzhe = {
//   name: '宋喆',
//   age: 38,
//   say() {
//     console.log(`${this.name}说孩子不是我的`);
//   }
// }

// baoqiang.say.call(songzhe, '马蓉', '小姐姐')
// baoqiang.say.apply(songzhe, ['马蓉', '小姐姐'])
// baoqiang.say.bind(songzhe)('马蓉', '小姐姐')


// es6语法

// class Gril {
//   name; // 实例属性
//   // 方式2: 给类添加静态属性
//   static age = 20
//   constructor(name) {
//     this.name = name

//   }
// }

// //方式1: 给类添加静态属性
// Gril.sex = '女'

// let lijiaxin = new Gril('李嘉欣');

// console.log(lijiaxin);

// console.log(Gril.sex);
// console.log(Gril.age);

// es5中添加静态属性
// function Girl() {

// }
// // 静态属性
// Girl.sex = '女'

// console.log(Girl.sex);

//纯函数的概念
// 一下就是纯函数
// 定义: 函数的参数不能在函数中被修改, 同时函数的返回值只能通过形参决定
// function add(a, b) {
//   return a + b
// }
// // 不纯
// function add(a, b) {
//   return a + b + Math.random() * 10 - 5
// }
// // 不纯
// function add(a, b) {
//   a += 10
//   return a + b
// }

